<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="row row-cols-1 g-5">
                <div class="col">
                    <div class="border-bottom py-4">
                        <div class="fs-5"><span class="text-danger">关键词</span> 查询到 66 个结果</div>
                        <div class="">耗时：350ms</div>
                    </div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="d-flex flex-column gap-2">
                                <a href="javascript:" class="h4 text-decoration-none   bsa-ellipsis-2">

                                    <span class="badge bg-warning me-1 align-text-bottom">置顶</span>
                                    <span class="badge bg-danger me-1 align-text-bottom">荐</span>
                                    bootstrap-admin 成为国内颇受欢迎的通用后台模板解决方案
                                </a>

                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <a href="javascript:" class="text-decoration-none">
                                        <img src="../dist/img/avatar.jpg"
                                             class="bsa-wh-40 rounded-circle" alt="作者头像">
                                        <span class="">欲饮琵琶码上催</span>
                                    </a>
                                    <div class="">
                                        <i class="bi bi-clock-fill"></i>
                                        <span class="ms-1">2023/03/11</span>
                                    </div>
                                </div>

                                <div class=" bsa-ellipsis-4">
                                    基于bootstrap5 设计的后台模板，从1.x版本的发布，到后续2.x的埋头丰富，逐步用行动赢得了许多人的关注。目前
                                    bootstrap-admin 在现在全是vue的时代下这种纯html模板开源且活跃的项目已经越来越少的情况下，几乎已成为开发者的不二选择。这得益于
                                    bootstrap-admin本身对日常开发中的常用页面的累积外，
                                    更得益于bootstrap本身具备的强大生态和bootstrap官方团队的付出。
                                </div>

                                <div class="d-flex align-items-center flex-wrap gap-2">
                                    <a href="javascript:"
                                       class="badge rounded-pill bg-success text-white text-decoration-none">前端</a>
                                    <a href="javascript:"
                                       class="badge rounded-pill bg-primary text-white text-decoration-none">vue</a>
                                    <a href="javascript:"
                                       class="badge rounded-pill bg-warning text-white text-decoration-none">bootstrap</a>
                                </div>
                            </div>
                        </div>
                        <a href="javascript:"
                           class="col-md-3 bg-body-tertiary  d-none d-md-flex align-items-center justify-content-center">
                            <img src="../dist/img/bootstrap-logo-shadow.png" class="img-fluid" alt="文章缩略图">
                        </a>
                    </div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex flex-column gap-2">
                                <a href="javascript:" class="h4 text-decoration-none   bsa-ellipsis-2">
                                    <span class="badge bg-danger me-1 align-text-bottom">荐</span>
                                    关于我寻找bootstrap模板这件事儿？
                                </a>

                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <a href="javascript:" class="text-decoration-none">
                                        <img src="../dist/img/avatar.jpg"
                                             class="bsa-wh-40 rounded-circle" alt="作者头像">
                                        <span class="">欲饮琵琶码上催</span>
                                    </a>
                                    <div class="">
                                        <i class="bi bi-clock-fill"></i>
                                        <span class="ms-1">2022/07/30</span>
                                    </div>
                                </div>

                                <div class=" bsa-ellipsis-3">
                                    模板是我们做后台管理系统经常所需要的东西。虽然，我们总可以花很多时间从头开始设计自己的模板，但有现在的模板让我们套，节省我们更多时间用来摸鱼，何乐而不为呢。

                                    这些现有出色模板，除了节省时间外，还附带这些好处：

                                    内置常用案例的组件

                                    跨不同视图的一致样式

                                    内置响应式设计

                                    技术支持和文档
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="javascript:" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="javascript:">1</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:">2</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="javascript:" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->



<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>

</body>
</html>